<template>
    <div>
        <Row>
            <Form ref="searchForm" :model="listQuery" inline :label-width="70" class="search-form">
                <Form-item label="应用名" prop="AppName">
                    <Input type="text" v-model="listQuery.appName" clearable placeholder="请输入应用名"
                           style="width: 200px"/>
                </Form-item>
                <Form-item label="名称" prop="title">
                    <Input type="text" v-model="listQuery.title" clearable placeholder="请输入名称"
                           style="width: 200px"/>
                </Form-item>
                <Form-item style="margin-left:-35px;" class="br">
                    <Button @click="handleFilter" type="primary" icon="ios-search">搜索</Button>
                    <Button @click="handleReset">重置</Button>
                </Form-item>
            </Form>
        </Row>
        <Row class="operation">
            <Button @click="executorCreate" type="primary" icon="md-add">添加执行器</Button>
        </Row>
        <br>
        <Row>
            <Table :loading="listLoading" border :columns="columns" :data="list" ref="table">
                <template slot-scope="{ row, index }" slot="action">
                    <Button style="margin-right:5px" type="primary" size="small" @click="executorModify(row)">编辑
                    </Button>&nbsp;&nbsp;
                    <Button type="error" size="small" @click="warnBeforeDelete(index,row)">删除</Button>
                </template>
                <template slot-scope="{ row}" slot="addressType">
                   <span v-if="row.addressType==1">
                       手工注册
                   </span>
                    <span v-if="row.addressType==0">
                        自动注册
                   </span>
                </template>
            </Table>
        </Row>
        <br>
        <Row type="flex" justify="end" class="page">
            <Page :current="listQuery.pageNum" :total="total" :page-size="listQuery.pageSize"
                  @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" :page-size-opts="[10,20,50]"
                  size="small" show-total show-elevator show-sizer></Page>
        </Row>
        <Modal :title="dialogStatus=='create' ? '新增执行器' : '编辑执行器'" v-model="dialogFormVisible" :mask-closable='false' :width="500"
               :styles="{top: '90px'}">
            <Form ref="exeForm" :model="form" :label-width="80" :rules="rules">
                <FormItem label="应用名"  prop="appName">
                    <Input autocomplete="off" maxlength="180" placeholder="请输入应用名"
                              v-model="form.appName"/>
                </FormItem>
                <FormItem label="名称"  prop="title">
                    <Input autocomplete="off" maxlength="180" placeholder="请输入名称"
                              v-model="form.title"/>
                </FormItem>
                <FormItem label="排序"  prop="sortOrder">
                    <Input type="number" :min="1" placeholder="请输入排列顺序" v-model="form.sortOrder"/>
                </FormItem>

                <FormItem label="注册方式" prop="addressType">
                    <Select v-model="form.addressType" style="width:200px">
                        <Option v-for="item in addressTypeEnum" :value="item.code" :key="item.code">{{ item.msg }}</Option>
                    </Select>
                </FormItem>

                <FormItem label="地址列表"  prop="addressList">
                    <Input autocomplete="off" maxlength="180" placeholder="请输入执行器地址，多个地址用逗号分隔" type="textarea"
                              v-model="form.addressList"/>
                </FormItem>
            </Form>
            <div class="dialog-footer" slot="footer">
                <Button @click="resetForm">取 消</Button>
                <Button @click="addForm" type="primary" v-if="dialogStatus=='create'">确 定</Button>
                <Button @click="updateForm" type="primary" v-else>确 定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {create, getGroupList, remove, update} from "@/projects/basic/api/jobadmin/group";
    import {deepClone} from '@/libs/utils/ObjectClone'
    export default {
        props: {},
        components: {},
        data() {
            return {
                columns:[
                    {
                        title: "id",
                        key:'id',
                        width:50,
                        align: "center"
                    },
                    {
                        title: "应用名",
                        key:'appName',
                        align: "center"
                    },
                    {
                        title: "名称",
                        key:'title',
                        align: "center"
                    },
                    {
                        title:'排序',
                        key: 'sortOrder',
                        align:'center'
                    },
                    {
                        title:'注册方式',
                        key: 'addressType',
                        align:'center',
                        slot:'addressType'
                    },
                    {
                        title:'在线机器地址',
                        key: 'addressList',
                        align:'center'
                    },
                    {
                        title:'操作',
                        key: 'action',
                        align:'center',
                        width:'140',
                        slot:'action'
                    }
                ],
                addressTypeEnum: [{code: '0', msg: '自动注册'}, {code: '1', msg: "手动输入"}],
                dialogStatus: 'create',
                dialogFormVisible: false,
                form: {
                    id: null, appName: '', title: '', sortOrder: '1', addressType: '0', addressList: ''
                },
                rules: {
                    appName: [{required: true, message: '请输入应用名', trigger: 'blur'}],
                    title: [{required: true, message: '请输入名称', trigger: 'blur'}],
                    sortOrder: [{required: true, message: '请输入排列顺序', trigger: 'blur'}],
                    addressType: [{required: true, message: '请选择注册类型', trigger: 'change'}]
                },
                list: [],
                total: 0,
                listLoading: false,
                listQuery: {
                    appName: '',
                    title: '',
                    pageNum: 1,
                    pageSize: 10
                }
            }
        },
        created() {
        },
        mounted() {
            this.getList()
        },
        watch: {},
        methods: {
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.listQuery.pageNum = 1
                this.getList();
            },
            resetForm(){
                this.dialogFormVisible= false;
                this.$refs.exeForm.resetFields();
            },
            addForm() {
                this.$refs['exeForm'].validate((valid) => {
                    if (valid) {
                        create(this.form).then(res => {
                            if (res.code === '0000') {
                                this.dialogFormVisible = false
                                this.$Message.success("新增成功")
                                this.getList()
                            } else {
                                this.$Message.error(res.msg)
                            }
                            this.listLoading = false
                        }).catch(function (err) {
                            console.log(err.message)
                        })
                    } else {
                        return false;
                    }
                });
            },
            updateForm() {
                this.$refs['exeForm'].validate((valid) => {
                    if (valid) {
                        update(this.form).then(res => {
                            if (res.code === '0000') {
                                this.dialogFormVisible = false
                                this.$Message.success("更新成功")
                                this.getList()
                            } else {
                                this.$Message.error(res.msg)
                            }
                        }).catch(function (err) {
                            console.log(err.message)
                        })
                    } else {
                        return false;
                    }
                });
            },
            executorCreate() {
                this.$refs.exeForm.resetFields();
                this.form = {
                    id: null, appName: '', title: '', sortOrder: '1', addressType: '0', addressList: ''
                }
                this.dialogFormVisible = true
                this.dialogStatus = 'create'
            },
            getList() {
                getGroupList(this.listQuery).then(res => {
                    this.listLoading = false
                    const {code, data: {records, total}} = res
                    if (code === '0000') {
                        this.list = records
                        this.total = total
                    } else {
                        this.$Message.error(res.msg)
                    }
                })
            },
            executorModify(row) { // 修改执行器信息
                this.$refs.exeForm.resetFields();
                this.dialogFormVisible = true
                this.dialogStatus = 'update'
                this.form = deepClone(row);
                this.form.addressType = this.form.addressType+'';
                this.form.sortOrder = this.form.sortOrder+'';
            },
            warnBeforeDelete(idx, row) {
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "确认删除当前执行器 " + row.title + " ?",
                    onOk: () => {
                        remove(row.id).then(res => {
                                if (res.code === '0000') {
                                    this.$Message.success("删除成功")
                                } else {
                                    this.$Message.error("删除失败")
                                }
                                this.getList()
                            }
                        ).catch(function (err) {
                            console.log(err.message)
                        })
                    }
                });
            },
            handleFilter() {
                this.listQuery.pageNum = 1
                this.getList()
            },
            handleSizeChange(val) {
                this.listQuery.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.listQuery.pageNum = val
                this.getList()
            }
        }
    }
</script>
